<template>
  <div class="invitation">
    <van-nav-bar title="评论" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="contentNav">
      <van-list v-model="loading" :finished="finished" @load="onLoad" :immediate-check="false" finished-text="没有更多了">
        <div class="tie" v-for="(item,index) in order" :key="index" @click='$router.push({path:"shopDetail",query:{categoryId:item.commentTargetId}})'>
          <div class="top mt-30">
            <img :src="item.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userId}})'/>
            <div class="txt1 l">
              <div class="title">
                <div class="name hide_other">{{item.userName}}</div>
                <div class="clear"></div>
              </div>
              <div class="time">2019年06月25日</div>
            </div>
            <div class="bottom flex r">
              <div class="otherNum2">回复</div>
              <!-- <span class="ml-50"  @click='$router.push({path:"leaveMessage",query:{targetType:2,targetId:item.commentId}})'>回复</span> -->
            </div>
            <div class="clear"></div>
          </div>
          <div class="speak-box">
            <p class="my-speak">{{item.content}}</p>
          </div>
          <div class="navs mt-30 flex_between">
            <div class="navTxt">
              <p class="hide_otherThree">这里是商品的详这里是商品的详情介这里是商品的详情介这里是商品的详情介情介这里是商品的详情介这里是商品的详情介</p>
            </div>
            <img src="../../../../public/images/my_01.png" />
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  name:"myComments",
  data() {
    return {
      loading: false,
        finished: false,
        isLoading:false,
        sizes:10,
        pages:1,
        order:[],
    };
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
        this.pages=1;
        this.$get(this.$api.user.notices,{page:this.pages,size:this.sizes,noticeType:this.$route.query.noticeType}).then(data=>{
          this.order=data.data.curPageData
        })
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.notices,{page:this.pages,size:this.sizes,noticeType:this.$route.query.noticeType}).then(data=>{
          if((Number(this.pages)-1)*this.sizes<data.data.totalNum){
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          this.pages++;
        })
      }, 500);
    },
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tie {
  padding: 0.3rem;
  position: relative;
  border-top: 0.3rem solid #f5f5f5;
}
.tie .top .pic {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.tie .top .txt1 {
  margin-left: 0.25rem;
}
.tie .top .txt1 .title .name {
  font: 0.32rem/0.35rem "微软雅黑";
  color: #4aace9;
  width: 1.5rem;
  float: left;
  height: 0.45rem;
}
.tie .top .txt1 .time {
  font: 0.24rem/0.35rem "微软雅黑";
  color: #999999;
}
.tie .top .btn_gz {
  width: 0.27;
  height: 0.28rem;
  display: block;
  margin-top: 0.26rem;
}
.tie .txt2 {
  font: 0.32rem/0.4rem "微软雅黑";
  color: #333333;
  margin: 0.3rem 0;
}
.tie .txt2 .more {
  color: #4aace9;
  margin-left: 0.2rem;
  font: 0.3rem/0.4rem "微软雅黑";
}
.tie .pic img {
  display: block;
  height: 1.4rem;
  margin-top: 0.04rem;
  width: 2.18rem;
  margin-bottom: 0.18rem;
}
.tie .bottom {
  font: 0.24rem/0.34rem "微软雅黑";
  color: #aaaaaa;
  height: 40px;
  align-items: center;
}
.tie .bottom .otherNum1 {
  float: right;
}
.tie .bottom img {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.1rem;
}

.tie .speak-box .my-speak {
  font-size: 0.34rem;
  line-height: 0.54rem;
  padding: 0.2rem 0 0 1rem;
  /* padding: 0.2rem 0 0.5rem 1rem; */
}
.tie .speak-box .other-speak {
  margin-left: 1rem;
  background: rgba(247, 247, 247, 1);
  font-size: 0.3rem;
  color: #333333;
  line-height: 0.47rem;
  border-radius: 0 0.04rem 0.04rem 0.04rem;
  position: relative;
}
.tie .speak-box .other-speak:before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.25rem;
  width: 0;
  height: 0;
  border-top: .25rem solid transparent;
  border-left: .15rem solid rgba(247, 247, 247, 1);
}
.tie .speak-box .other-speak .txt-box {
  padding: 0.1rem 0.2rem;
}
.tie .speak-box .other-speak span {
  color: rgba(146, 146, 146, 1);
}

.navs .navTxt {
  height: 1.65rem;
  flex: 1;
  border: 1px solid #dddddd;
  box-sizing: border-box;
}
.navs .navTxt p {
  font: 0.28rem/0.34rem "微软雅黑";
  color: #333333;
  margin: 0.26rem;
}
.navs img {
  width: 2.14rem;
  height: 1.65rem;
  display: block;
}

.author {
  color: rgba(74, 172, 233, 1);
}

.contentNav{height: calc(100vh - 46px);overflow-y: scroll;}
</style>
